<template>
  <div class="content">
    <h4>选择客户类型</h4>
    <div>
      <a-radio-group defaultValue="A" size="large" @change="onChange">
        <a-radio-button value="A">企业、个体工商户</a-radio-button>
        <a-radio-button style="margin-left: 50px;" value="B">&emsp;&emsp;小微商户&emsp;&emsp;</a-radio-button>
      </a-radio-group>
    </div>
    <div v-if="isshow" class="orgClass">
      <h5>您需要准备以下材料：</h5>
      <p>1、营业执照复印件加盖公章一份；</p>
      <p>2、法定代表人身份证正面和背面复印到一张A4纸上加盖公章一份；</p>
      <p>3、结算银行账户（对公账户证明或对私银行卡正面和背面）复印到一张A4纸上加盖公章一份；</p>
    </div>
    <div v-if="!isshow" class="orgClass">
      <h5>您需要准备以下材料：</h5>
      <p>1、申请人身份证正面和背面照片；</p>
      <p>2、申请人银行卡正面和背面照片；</p>
      <p>3、申请人手持身份证和银行卡照片。</p>
    </div>
    <a-button
      :disabled="disabled"
      class="btn-next"
      type="primary"
      @click="doNext"
    >确&nbsp;&nbsp;&nbsp;&nbsp;定</a-button>
   
    <!-- <a-modal
      style="top: 30vh;"
      @ok="handleOk"
      @cancel="handleCancel"
      :visible="modalVisible"
      :closable="false"
      :maskClosable="false"
      :footer="null"
    >
      <div class="modal_div">
        <div class="modal_title">
          <h3>您还未设置“合作机构费率模板”</h3>
        </div>
        <p style="line-height: 30px;text-align: center;">点击“确定”前往设置</p>
        <div class="footClass">
          <a-button type="primary" class="buttonClass" @click="clickhandleCancel">确&emsp;定</a-button>
        </div>
      </div>
    </a-modal> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      scroll1: false,
      scroll2: false,
      isshow: true,
      ratelist: [],
      modalVisible: false,
      disabled: false,
      userType: "A"
    };
  },

  mounted() {
    // this.getrateTemplatelist();
  },
  methods: {
    onChange(e) {
      console.log(`checked = ${e.target.value}`);
      this.userType = e.target.value;
      this.isshow = e.target.value == "A" ? true : false;
    },
    getrateTemplatelist() {
      this.disabled = true;
      this.$axios
        .get("/agent/fee/group/getAgentFeeTemplateGroups")
        .then(res => {
          if (res.data.code == "OK") {
            this.ratelist = res.data.list;
            this.modalVisible = this.ratelist.every((item, index) => {
              return item.code !== "agent";
            });
            this.disabled = false;
            //  console.log('this.ratelist', this.ratelist)
          }
        });
    },
    doNext() {
      this.$router.push(`/Partners/userType${this.userType}/step1`);
      // if (this.ratelist.length > 0) {
      //   this.$router.push(`/Partners/userType${this.userType}/step1`);
      // } else {
      //   this.modalVisible = true;
      // }
    },
    showtip() {
      this.$message.info("请阅读《支付服务协议》和《隐私权政策》");
    },
    handleOk(e) {
      this.modalVisible = false;
    },
    handleCancel(e) {
      this.modalVisible = false;
    },
    modalTrue() {
      this.modalVisible = true;
    },
    clickhandleCancel() {
      this.modalVisible = false;
      this.$router.push(`/org/transmanage/addnewrate/agent`);
    }
  }
};
</script>
<style lang="scss" scoped>
h4 {
  font-size: 18px;
  margin-bottom: 50px;
}

h5 {
  font-size: 16px;
  margin-bottom: 20px;
}

.content {
  text-align: center;
}

.btn-next {
  margin-top: 20px;
  width: 120px;
}

.orgClass {
  width: 60%;
  margin: 50px auto;
  text-align: left;
}

/deep/ .ant-radio-button-wrapper:first-child {
  border-radius: 4px;
}

/deep/.ant-radio-button-wrapper:last-child {
  border-radius: 4px;
}

.footClass {
  text-align: center;
}

.buttonClass {
  margin-top: 20px;
  width: 110px;
}

.modal_div {
  padding: 20px;
}

.modal_title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  border-bottom: 1px solid #ccc;
  margin-bottom: 25px;
}

.modal_title p {
  margin-bottom: 5px;
}
</style>